<template>
	<view class="loading">
		<view class="img_wraper">
			<image class="img" v-show="loadingType == 'no_data'" src="../../static/images/no_data.png"></image>
			<image class="img" v-show="loadingType == 'no_network'" src="../../static/images/no_network.png"></image>
			<image class="img" v-show="loadingType == 'no_trips'" src="../../static/images/no_trips.png"></image>
		</view>
		<view class="loading_text">{{loadingText}}</view>
		<view class="refresh_btn" v-show="refreshBtn" @click="refresh">
			{{refreshBtnText}}
		</view>
		<view class="default">
			 <slot name="default"></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		loadingType: {	// 图片类型  no_data:无数据 no_network:加载失败 no_trips:无班次
			type: String,
			default: 'no_data'
		},
		loadingText: {
			type: String,
			default: '暂无数据~'
		},
		refreshBtn:{
			type: Boolean,
			default: true
		},
		refreshBtnText:{
			type: String,
			default: '刷新重试'
		}
	},
	data() {
		return {};
	},
	methods:{
		refresh(){
			this.$emit('refresh', true);
		}
	}
};
</script>

<style lang="scss" scoped>
	.loading{
		text-align: center;
		margin: 0;
		.img_wraper{
			.img{
				width: 520rpx;
				height: 520rpx;
			}
		}
		.loading_text{
			font-size:28rpx;
			font-weight:500;
			color:rgba(139,150,172,1);
			line-height:32rpx;
		}
		.refresh_btn{
			margin: 50rpx auto;
			width:380rpx;
			height:80rpx;
			background:linear-gradient(90deg,rgba(34,100,255,0.1) 0%,rgba(52,113,255,0.1) 99%);
			border-radius:40rpx;
			font-size:28rpx;
			font-weight:bold;
			color:rgba(36,101,255,1);
			line-height:80rpx;
		}
	}
</style>
